
{template 'include/header'}
<style>
	body{background:#fff; font-family:Helvetica, Arial, sans-serif;}
	a{color:#666666;}a:hover{color:#3ebacc;}
	.profile-box{padding:2px 10px; background:transparent; background-size:100% 100%;}
	label{font-weight: 400 !important;margin: 0;}
	.control-label{font-size:14px;line-height:42px;margin:0px;color: #000;}
	.gy_left{float: left;width: 20%;}
	.gy_right{float: right;width: 80%;}
	.bor_btm, .bor_top, .bor_left, .bor_right{position: relative;}
	.bor_btm:after, .bor_top:after, .bor_left:after, .bor_right:after{content: '';position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }
	.bor_btm:after{border-bottom: 1px solid #e7e7e7;}
	.bor_top:after{border-top: 1px solid #e7e7e7;}
	.bor_left:after{border-left: 1px solid #e7e7e7;}
	.bor_right:after{border-right: 1px solid #e7e7e7;}
	.bck_btm:after{content: "";display: block;position: absolute;left: -50%;width: 200%;height: 1px;background: #e7e7e7;-webkit-transform:scale(0.5);}
	.form-group{border-bottom: 1px solid #e7e7e7;margin: 0;line-height: 42px;position: relative;}
	.form-control{border:none !important;background: #fff;height: 40px;padding: 0 10px;-webkit-appearance: none;box-shadow: 0 0 0 #fff;outline:none;}
	.gy_d1{width: 100%;background: #fff; z-index: 10;}
	.gy_d1 i {display: inline-block;margin-left: 5px;vertical-align: 1px;width: 10px;height: 10px;border: 1px solid #fff;border-top: 0;border-right: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);position: absolute;left: 15px;top:25px;}
	.gy_d1 img{width: 100%;}
	.gy_d1l_img{width: 24px;float: left;margin-top: 11px;}
	.gy_d1l_spn{line-height: 46px;}
	.gy_d1l{width: 23%;float: left;margin-left: 2%}
	.gy_d1c{width: 100%;float: left;text-align: center;line-height: 46px;}
	.gy_footer{width: 100%;height: 50px;position: fixed;bottom: 0;left: 0;background: #fff;}
	.gy_footer_li{width: 25%;text-align: center;list-style: none;float: left;}
	.gy_footer_li_img{width: 22px;margin-top: 6px;}
	.gy_footer_li_p{font-size: 12px;line-height: 22px;color: #000;}
	.gy_footer_lic p{color: #43ac43 !important;}
	.imgList img::before{}
	.textarea{border-style:none;width:100%;height:100px;line-height:22px;color:#555;margin-top:10px;padding:0 7px;outline: none;overflow-y: auto;}
	.u-tri:before {position: absolute;right: 5px;top: 12px;content: '';border-top: 8px solid #999;border-bottom: 8px solid transparent;border-left: 8px solid transparent;border-right: 8px solid transparent;}
    .uploadImg{position: relative;float: left;margin:0 8px 8px 0;}
    .uploadImg>img{height:78px;max-width:120px;}
    .uploadImg>i{width: 14px;height: 14px;border-radius: 7px;background-color: rgba(0,0,0,0.5);color: #fff;position: absolute;right: -7px;top: -7px;font-size: 14px;line-height: 14px;text-align: center;font-style: normal;}
	.uploadLogo{width: 40px;height: 40px;border-radius: 20px;position: absolute;right:  0;top: 0;overflow: hidden;}
	.uploadLogo img{width: 100%;}
	.slect{position: absolute;right: 0;bottom: 42px;background-color: #fff;margin-bottom: 2px;width: 80%;border-radius: 5px;overflow: auto; max-height: 240px;border: 1px #eee solid;box-shadow: 0px 0px 10px #666;}
	.slect p{padding: 10px;border-bottom: 1px #eee solid;margin: 0;line-height: 12px;color: #666;font-size: 12px;white-space:nowrap;cursor: pointer;}
	.slect p:last-child{border-bottom: none;}
</style>
<div class="gy_d1">
	<a href="javascript:history.back(-1)"><i></i></a>
	<img src="<?php echo MODULE_URL;?>template/mobile/img/fq_top.jpg">
</div>
<div style="height:10px;background:#f2f2f2;width:100%"></div>
{php load()->func('tpl');}
<div class="profile">
	<div class="tabbable">
		<div class="profile-box">
		<form class="tab-content clearfix" id="uploadForm" action="{php echo $this->createMobileUrl('comp');}" method="post" enctype="multipart/form-data">
		<div class="tab-pane active animated" id="tab1">
			<div class="form-group u-tri">
				<label class="gy_left control-label">项目类别</label>
				<div class="gy_right">
					<select name="class_id" class="form-control" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;">
					{loop $classes $item}
						<option value="{$item['class_id']}">{$item['class_name']}</option>
					{/loop}
					</select>
					<!-- <span class="help-block"></span> -->
				</div>
				<div class="clearfix"></div>
			</div>	
			<div class="form-group">
				<label class="gy_left control-label">项目名称</label>
				<div class="gy_right">
					<input class="form-control" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" type="text" id="pro-name" name="pro_name" placeholder="项目名称" />
					<!-- <span class="help-block"></span> -->
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="form-group">
				<label class="gy_left control-label">项目简介</label>
				<div class="gy_right">
					<input class="form-control" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" type="text" id="pro-short" name="pro_short" placeholder="项目简介" />
				</div>
				<div class="clearfix"></div>
			</div>
						
			<div class="form-group u-tri">
				<label class="gy_left control-label">接收机构</label>
				<div class="gy_right">
				    <!-- <input type="text" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" id="mechanism" class="form-control" name="mechanism" placeholder="接收机构"/> -->
				    <select name="mechanism" class="form-control" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" id="mechanism">
					{loop $company $item}
						<option value="{$item['class_id']}">{$item['company_name']}</option>
					{/loop}
					</select>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="form-group">
				<label class="gy_left control-label">队伍名称</label>
				<div class="gy_right">
					<input type="text" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;padding-right: 42px;" id="ranksName" class="form-control" name="ranksName" placeholder="队伍名称" oninput="dw(this.value)"/>
					<div class="uploadLogo"><img src="<?php echo MODULE_URL;?>template/mobile/img/addLogo.png"></div>
					<input type="hidden" id="uploadLogo" name="uploadLogo">
					<div class="slect" style="display: none"></div>
				</div>
				<div class="clearfix"></div>
			</div>
			
			<div class="form-group">
				<label class="gy_left control-label" style="line-height:18px;padding:6px 0 4px;">目标筹集<br/><span style="font-size:12px;color:#777;line-height:18px !important;">( 单位:元 )</span></label>
				<div class="gy_right">
				    <input type="text" style="height:46px;background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" id="pro-goal" class="form-control span2" name="pro_goal" placeholder="请输入正确的金额"/>
				</div>
				<div class="clearfix"></div>
			</div>
			
			<div class="form-group">
				<label class="gy_left control-label">手机号</label>
				<div class="gy_right">
					<input class="form-control" style="background:#fff !important;-webkit-appearance: none;box-shadow:none !important;" id="utel" type="text" name="utel" placeholder="请输入您的手机号" />
				</div>
				<div class="clearfix"></div>
			</div>
						
			<div class="form-group">
				<label class="gy_left control-label">项目内容</label>
				<div class="gy_right" style="line-height:24px;">
					<div id="pro_content_code" class="textarea" contenteditable="true">请输入项目内容，不少于200字</div>
					<input type="hidden"  name="pro_content" id="pro_content" value="">
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="form-group" style="border:none;">
				<label class="gy_left control-label">特色图片</label><span class="gy_right" style="color:red;font-size:12px;line-height:18px !important;margin-top:12px;">（*图片可传多张，要一张一张传，最后一张作为特色图片首页显示，其余插入内容尾部）</span>
				<div class="gy_right" style="width:100% !important;">
					<input type="text" name="pro_feature" id="pro_feature" value="" style="display:none" />
					<div id="img" style="position:relative; width:100%; height:auto;padding-top:20px;">
 						<a href="javascript:;" id="upimg" style="display: inline-block;width: 78px;height: 78px;background: #e1e5ed;border: dashed #a2a7ad 1px;font-size: 40px;font-weight: bold;color: #fff;line-height: 72px;text-align: center;overflow: hidden; text-decoration:none;margin:0 8px 8px 0;float: left;">+</a>
 					</div> 
 				</div>
 				<div class="clearfix"></div>
			</div>
		</div>
		<div class="form-group">
			<input type="hidden" value="{$user['mem_id']}" name="mem_id">
			<div style="text-align:center;margin-top:20px;">
				<a type="submit" id="btn_click" class="btn btn-primary btn-block" name="submit" style="background:#43ac43;border:none;" value="提交">提交</a>
				<button type="submit" id="btn_submit" style="display:none" class="btn btn-primary btn-block" name="submit" value="提交">提交</button>
				<input type="hidden" name="token" value="{$_W['token']}" />
			</div>
			<div class="clearfix"></div>
		</div>
		</form>
		</div>
	</div>
</div>
<div style="height:70px;" class="margin_b"></div>
	<div class="gy_footer">
		<a href="{php echo $this->createMobileUrl('Welfare');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_1.png">
			<p class="gy_footer_li_p">首页</p>
		</li></a>
		<li class="gy_footer_li bor_top gy_footer_lic">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_41.png">
			<p class="gy_footer_li_p">发起项目</p>
		</li>
		<a href="{php echo $this->createMobileUrl('looks');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_2.png">
			<p class="gy_footer_li_p">公益天地</p>
		</li></a>
		<a href="{php echo $this->createMobileUrl('home');}" style="color:#e7e7e7;"><li class="gy_footer_li bor_top">
			<img class="gy_footer_li_img" src="<?php echo MODULE_URL;?>template/mobile/img/gy_3.png">
			<p class="gy_footer_li_p">我</p>
		</li></a>
	</div>
<script>
    $("#img").delegate(".uploadImg>i","click",function() {
        var num=$(this).prev("img").attr("data-imgid");
        $(this).parent(".uploadImg").remove();
        $('#pro_content_code img[data-imgid='+num+']').remove();
    });

	$('input,textarea').bind("focus",function(){
		$(".gy_footer").css({"position":"static","bottom":0});
		$(".margin_b").css("height","20px");
	}).bind("blur",function(){
		$(".gy_footer").css("position","fixed");
		$(".margin_b").css("height","70px");
	});
	//实时查询队伍名称
	function dw(el){
		$('.slect').html("");
		var dw = el;
		if(dw!=""){
			$.ajax({
				type: 'POST',
				url: '{php echo $this->createMobileUrl("searchjoin");}',
				data: {name:dw},
				dataType:"json",
				success: function(items){

					var html = '';
					var join_logo = '';
					$.each(items.ranks,function(i,item){
						if (item.join_name != '') {
							html += '<p data-img="'+item.join_logo+'">'+item.join_name+'</p>';
							
							$('.slect').html(html);
							$(".slect").show();
						}
						
					});
					
					$(".slect p").click(function(){
						var v=$(this).text();
						join_logo = $(this).attr('data-img');
						if(join_logo!=""){//如果查到队伍logo
							$(".uploadLogo img").attr("src","https://www.wgywsy.com/"+join_logo);
							}
						$("#ranksName").val(v);
						$(".slect").hide();
					});
					$("#ranksName").blur(function () {
						setTimeout(function(){
							$(".slect").hide();
						},500)
						
					});
				}
			});
			
		}else{
			$(".slect").hide();
		}
	};
	// $(document).on(".slect p","click", function(){
	// 					var v=$(this).text();
	// 					alert(1111);
	// 					$("#ranksName").val(v);
	// 					$(".slect").hide();
	// 				});
	// $("body").delegate(".slect p","click", function(){
	// 					var v=$(this).text();
	// 					alert(1111);
	// 					$("#ranksName").val(v);
	// 					$(".slect").hide();
	// 				});
	

	$(".textarea").focus(function () {
		if($(".textarea").text()=="请输入项目内容，不少于200字"){
			$(".textarea").text("");
		}
	}).blur(function () {
		if($(".textarea").text()==""){
			$(".textarea").text("请输入项目内容，不少于200字");
		}
	});

	$("#btn_click").click(function(){
        var pro_name = $("#pro-name").val();
        var pro_short = $("#pro-short").val();   
        var pro_goal = $("#pro-goal").val();
        var utel = $("#utel").val();
        $("#pro_content").val($(".textarea").html());
		var pro_content = $("#pro_content").val();
        var mechanism = $("#mechanism").val();
        var ranksName = $("#ranksName").val();

        var lastImg = $(".textarea img").last().attr("src");
        $("#pro_feature").val(lastImg);//特色图片

        if(pro_name=="") {
			layer.open({content:"请输入项目名称!",skin: 'msg',time: 2});
            return ;
        }
        if (pro_short=="") {
			layer.open({content:"请输入项目简介",skin: 'msg',time: 2});
            return ;
        }
		if (mechanism=="") {
			layer.open({content:"请输入接收机构",skin: 'msg',time: 2});
			return ;
		}
		if (ranksName=="") {
			layer.open({content:"请输入队伍名称",skin: 'msg',time: 2});
			return ;
		}
		if (pro_goal=="") {
			layer.open({content:"请输入项目筹集目标",skin: 'msg',time: 2});
			return ;
		}
		if (!/^1\d{10}$/.test(utel)) {//
			layer.open({content:"请输入正确的电话号码",skin: 'msg',time: 2});
			return ;
		}
        if (pro_content==""||pro_content=="请输入项目内容，不少于200字") {
			layer.open({content:"请输入项目内容",skin: 'msg',time: 2});
            return ;
        }

        $("#btn_submit").click();

    });
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
{php echo register_jssdk(false);}
<script>
  	
wx.ready(function () {
	var images = {
		localId: [],
		serverId: [],
	};
	var uploadType="";
	document.querySelector('#upimg').onclick = function () {
    //选择图片后开始异步上传到微信服务器，在syncUpload中接受微信服务器返回的资源id，组合后uploadserverid异步上传到服务器，服务器处理后返回图片的路径，客户端js接受图片路径后组合成html，动态插入。
	    wx.chooseImage({
			count: 1,//每次只允许上传一张图片
		    success: function (res) {
		        images.localId = res.localIds;
		        len = images.localId.length;
		        syncUpload(images.localId);
		    }
	    });
  	};
	document.querySelector('.uploadLogo').onclick = function () {
		uploadType="uploadLogo";
		wx.chooseImage({
			count: 1,//每次只允许上传一张图片
			success: function (res) {
				images.localId = res.localIds;
				len = images.localId.length;
				syncUpload(images.localId);
			}
		});
	};
  	//异步上传图片到微信服务器
  	var syncUpload = function(localIds){
      	var localId = localIds.shift();
      	wx.uploadImage({
            localId: localId,
            isShowProgressTips: 1,
            success: function (res) {
                 images.serverId.push(res.serverId);// 返回图片的服务器端ID
                 if(len==images.serverId.length){
                 //异步上传图片id到服务器
                  var  serverids = images.serverId.join(',');
                  /*alert(serverids);*/
                  uploadserverid(serverids);
                    wx.downloadImage({
					    serverId: serverids, // 需要下载的图片的服务器端ID，由uploadImage接口获得
					    isShowProgressTips: 1, // 默认为1，显示进度提示
					    success: function (res) {
					         // 返回图片下载后的本地ID
					    }
					});
                 //销毁数据
                  images.localId = images.serverId  = [];
                 }
                //其他对serverId做处理的代码
                 if(localIds.length > 0){
                  syncUpload(localIds);
                 }
            },
            error: function(){
              alert("error");
            }
      	});
  	};

  	//异步上传图片id到服务器，服务器返回真正的图片地址，js组装后显示在页面上
  	var uploadserverid = function(serverId){
         $.ajax({
         url: "{php echo $this->createMobileUrl('upload')}",
         type: "GET",
         dataType:'json',
         data: "serverid="+serverId,
         success: function(msg){
            if(msg==''){
				layer.open({content:"上传失败，请重试",skin: 'msg',time: 2});
            }
            //拼接html
			 if(uploadType=="uploadLogo"){
				 htmlpinLogo(msg);
			 }else {
				 htmlpin(msg);
			 }
         },
         error:function(){
			 layer.open({content:"上传失败，请重试",skin: 'msg',time: 2});
         }
       });
  	};

	var htmlpinLogo = function(msg){
		$(".uploadLogo img").attr("src","{$_W['siteroot']}attachment/"+msg);
		$("#uploadLogo").val(msg);
	};

  	var numb=0;
	var htmlpin = function(msg){
        numb++;
		var a = msg.indexOf(",");
		var pval = $("#pro_content_code").val();
		if(a>0) {
			var imgarr = msg.split(",");
			for(var i=0;i<imgarr.length;i++){
		 		$("#img").append("<div class='uploadImg'><img id='img0' data-imgId='"+ numb +"' src='"+"{$_W['siteroot']}attachment/"+msg[i]+"'><i>×</i></div>");
		 	}
		 } else {
		 	$("#img").append("<div class='uploadImg'><img id='img0' data-imgId='"+ numb +"' src='"+"{$_W['siteroot']}attachment/"+msg+"'><i>×</i></div>");
		 }
	 	//$("#pro_feature").val(msg);
	 	$("#pro_content_code").append(pval+'<img style="height:30px;display:block" data-imgId="'+ numb +'"  src="'+"{$_W['siteroot']}attachment/"+msg+'">');
	};

});
</script>